<template>
    <div style="background-color: antiquewhite;">
        <h1>这个是我的儿子</h1>
        <!-- 添加儿子组件 -->
        <SonBoy @boy="BoyHandle"/>
        <h1>这个是我的女儿</h1>
        <!-- 添加女儿组件 -->
        <SonGirl @girl="GirlHandle"/>
        <p>我儿子的成绩是{{ gradeBoy }}</p>
        <p>我女儿的成绩是{{ gradeGirl }}</p>
        <p>看看我的私房钱还有多少，哎，只剩下{{ store.money }}元了！</p>
        <p>给成绩高的发点小钱吧。<button @click.once="send(100)">奖励</button></p>
    </div>
</template>

<script>
import SonBoy from '@/components/SonBoy.vue';
import SonGirl from '@/components/SonGirl.vue';
import { useMyStore } from '../store/mystore.js';

export default {
    components:{
        SonBoy,
        SonGirl
    },
    methods:{
        BoyHandle(val){
            this.gradeBoy = val
        },
        GirlHandle(val){
            this.gradeGirl = val
        },
        send(val){
            if(this.gradeBoy > this.gradeGirl && this.gradeBoy >= 60){
                this.store.decrement(val),
                this.moneyBoy += val
            }else if(this.gradeGirl > this.gradeBoy && this.gradeGirl>=60){
                this.store.decrement(val),
                this.moneyGirl += val
            }else if(this.gradeBoy == this.gradeGirl && this.gradeGirl>=60){
                this.store.decrement(val),
                this.moneyGirl += val/2,
                this.moneyBoy += val/2
            }else{
                alert('考不及格还想要奖励！！！！！！！')
            }
        }
    },
    data() {
        return {
            gradeBoy:'',
            gradeGirl:'',
            store:useMyStore(),
            moneyBoy:2000,
            moneyGirl:3000,
        }
    },
}
</script>